<template>
  <div class="evaluate-product-component">
    <div class="product-info-progress">
      <div
        class="progress-bar"
        :style="{
          width: select / total * 100 + '%',
          color: select > 0 ? progressBarColor : '#2c2c2c',
          background: select > 0 ? progressBarBg : 'transparent'
        }"
      >
        {{ select }}/{{ total }}
      </div>
    </div>
    <div class="product-info-body">
      <div
        class="evaluate-tips"
        :style="{
          background: descBg
        }"
      >
        <img v-if="leftIcon" class="icon-tips" :src="leftIcon" />
        <span
          class="tips"
          :style="{
            color: descColor
          }"
        >
          {{ desc }}
        </span>
      </div>
      <div class="product-info">
        <div class="product-name">{{ productName }}</div>
        <div class="product-change" @click="$emit('change')">更换机型</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    productInfo: Object,
    loading: Boolean,
    progressBarColor: {
      type: String,
      default: '#2c2c2c'
    },
    progressBarBg: {
      type: String,
      default: 'linear-gradient(90deg,#ffeb57, #ffd900)'
    },
    leftIcon: {
      type: [Boolean, String],
      default: 'https://s1.huishoubao.com/static/wechatMini/icon_evaluate_tips.png'
    },
    desc: {
      type: String,
      default: '如实选择机器情况，估价更准确，收款更快速！'
    },
    descColor: {
      type: String,
      default: '#fe681d'
    },
    descBg: {
      type: String,
      default: '#fffad8'
    },
    select: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    productName () {
      return this.loading ? '加载中...' : (this.productInfo.productName || '暂无机型名')
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>